<!--房间样式代码-->
<link rel="stylesheet" href="/Home/css/room.css">

<div class="main">
    <input type="hidden" name="user_name" value="{$data['user_name']}">
    <input type="hidden" name="room_id" value="{$data['room_id']}">
    <input type="hidden" name="client_id" value="{$data['client_id']}">
    <input type="hidden" name="sex" value="{$data['sex']}">
    <div class="layui-row">
        <!--聊天面板-->
        <div class="layui-col-xs12 window">
            <p class="" style="text-align: center;color:#ccc;">{$data['room_titile']}</p>
            <br>
            {if isset($data['distance'])}
            <p style="text-align: center;color:#ccc;">双方距离{$data['distance']}</p>
            {/if}
            {if isset($data['address'])}
                <input type="hidden" value="{$data['address']}" class="address">
                {else/}
                <input type="hidden" value="0" class="address">
            {/if}
        </div>
        <!--表情导航-->
        <div class="layui-col-xs12 nav">
            <div class="layui-inline">
                <i class="layui-icon layui-icon-voice " id="layui-icon-voice" style="font-size: 30px; "></i>
            </div>
            <!--  <div class="layui-inline text">
                <textarea name="" placeholder="请输入您的聊天内容" type="text"></textarea>
            </div> -->
            <div class="layui-inline text">
                <div  contenteditable="true"></div>
            </div>

            <div class="layui-inline">
                <i class="layui-icon layui-icon-picture" style="font-size: 30px; "></i>
            </div>
           <!--    <div class="layui-inline">
                <i class="layui-icon layui-icon-face-smile-b" style="font-size: 30px; "></i>
            </div> -->
             <div class="layui-inline send">
                <i class="layui-icon layui-icon-release" style="font-size: 30px; "></i>
            </div>
        </div>
        <form id="uploadForm" enctype="multipart/form-data" hidden>
            <input id="file" type="file" name="file"/>
        </form>
        <!--输入框-->
       
    </div>
</div>
<script>
    $(function () {
        user_name=$("input[name='user_name']").val();
        client_id=$("input[name='client_id']").val();
        room_id=$("input[name='room_id']").val();
        sex=Number($("input[name='sex']").val());
        address=$(".address").val();
        function isWeixinCient(){   //判断是否是微信
            var ua = navigator.userAgent.toLowerCase();
            if(ua.match(/MicroMessenger/i)=="micromessenger") {
                return true;
            } else {
                return false;
            }
        }

        let isWeixin=isWeixinCient();

        if (!isWeixin){
            $(".layui-icon-voice").hide();
        }else{
            //模拟微信发送

            var btnElem=document.getElementById("layui-icon-voice");//获取ID
            var posStart = 0;//初始化起点坐标
            var posEnd = 0;//初始化终点坐标
            var posMove = 0;//初始化滑动坐标
            var saying;
            var isFirst=true;    //是否是首次发送语音请求

            function initEvent() {
                btnElem.addEventListener("touchstart", function(event) {    //按住说话
                    event.preventDefault();//阻止浏览器默认行为
                    posStart = 0;
                    posStart = event.touches[0].pageY;//获取起点坐标
                    btnElem.value = '松开 结束';
                    //layer.msg("正在说话");
                    saying=layer.msg('正在说话中.......', {
                        time:false //取消自动关闭
                    });
                    wx.startRecord();
                });
                btnElem.addEventListener("touchmove", function(event) {
                    event.preventDefault();//阻止浏览器默认行为
                    posMove = 0;
                    posMove = event.targetTouches[0].pageY;//获取滑动实时坐标
                    if(posStart - posMove < 500){
                        btnElem.value = '松开 结束';

                    }else{
                        btnElem.value = '松开手指，取消发送';
                    }

                });
                btnElem.addEventListener("touchend", function(event) {
                    event.preventDefault();
                    posEnd = 0;
                    posEnd = event.changedTouches[0].pageY;//获取终点坐标
                    btnElem.value = '按住 说话';

                    if(posStart - posEnd < 500 ){
                        layer.close(saying);//手动关闭

                        wx.stopRecord({
                            success: function (res) {
                                let localId = res.localId;
                                wx.uploadVoice({
                                    localId: localId, // 需要上传的音频的本地ID，由stopRecord接口获得
                                    isShowProgressTips: 1, // 默认为1，显示进度提示
                                    success: function (res) {
                                        var serverId = res.serverId; // 返回音频的服务器端ID

                                        save(serverId);
                                    }
                                });
                            }
                        });
                    }else{
                        layer.msg("移除区域取消发送");
                    };
                });
            };
            initEvent();
            function save(localId){
                let user_name=$("input[name='user_name']").val();
                let client_id=$("input[name='client_id']").val();
                let room_id=$("input[name='room_id']").val();
                let sex=Number($("input[name='sex']").val());
                // let message = user_name+"说:";
                let address=$(".address").val();
                let send = {
                    // message: message,
                    room_id: room_id,
                    client_id: client_id,
                    sex: sex,
                    audio:"audio",
                    localId:localId,
                    address:address,
                    user_name:user_name
                }
                $.ajax({
                    type: "post",
                    url: "/send",
                    data: send,
                    success: function (data) {
                        layer.msg("发送成功");
                        $("textarea").val('');
                    }
                })

            }


        }


    })


</script>

<!--解决软键盘顶起事件、回车发送事件、表情包事件、飞机图标发送按钮点击事件-->
<script src="/Home/js/send.js"></script>

<script>

    $(function () {
        let room_count = Number("{$data['room_count']}");

        if (room_count == 1) {
            layer.msg("对方貌似抛下你独自先走了~两秒后您将返回大厅");
            setTimeout(function () {
                location.reload();
            }, 3000)
        }

    })
</script>
<!--文件上传逻辑-->
<script src="/Home/js/uploadfile.js"></script>

